const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: "./src/index.js",
    // entry: ["./src/index.js", "./src/main.js"],
    // entry: {
    //     index: {
    //         import: "./index.js",
    //         dependOn: ["axios", "a"], //打包重复文件
    //     },
    //     main: "./main.js",
    // },
    output: {
        path: path.resolve(__dirname, "./dist"),
        // filename: "index.js",
        // 多对多
        filename: "[name].js",
        // clean: true,
    },
    // 处理loader目录
    resolveLoader: {
        modules: ["node_modules", path.resolve(__dirname, "loaders")],
    },
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: "raw-loader",
            },
            {
                test: /\.(gif|png|jpe?g)/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name]_[contenthash].[ext]",
                        outputPath: "./images",
                        // 打包后文件url 相对于当前配置文件
                        publicPath: "./build/images",
                    },
                },
            },
            {
                test: /\.css$/,
                use: [
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                        options: {
                            // 是否处理url
                            url: true,
                            // 是否处理import
                            import: true,
                            // 是否生成对应sourcemap文件
                            sourceMap: false,
                        },
                    },
                ],
            },
            {
                test: /\.docx$/,
                loader: "doc-loader",
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template: "./index.html",
            filename: "index.html",
            title: "webpack-plugin",
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
    ],
    // devserver打包的文件不在存放到硬盘中，存放到内存中
    devServer: {
        port: 8888,
        open: true,
        proxy: {
            // "/data": "http://localhost:3000",
            "/api": {
                target: "http://localhost:3000",
                pathRewrite: {
                    "^/api": "",
                },
            },
        },
        hot: true,
        // 热更新失败 不会执行live reload
        hotOnly: true,
    },
    devtool: "cheap-source-map",
    // 优化
    optimization: {
        runtimeChunk: "single",
        SplitChunks: {
            chunks: "all",
        },
    },
    externals: {
        jquery: "$",
    },
    mode: "development",
};
